import React, { Component } from 'react';
import './App.css';
import { HashRouter, Route, Link, Redirect } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import HomeContainer from './components/home/HomeContainer';
import MovieContainer from './components/movie/MovieContainer';
import AboutContainer from './components/about/AboutContainer';
const { Header, Content, Footer } = Layout;
const hash = window.location.hash.split('/')[0] === '' ? 'home' : window.location.hash.split('/')[1];
class App extends Component {
  render() {
    return (
      <HashRouter>
        <Layout className="layout" style={{ height: '100%' }}>
      <Header>
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={[hash]}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="home"><Link to="/home">首页</Link></Menu.Item>
        <Menu.Item key="movie"><Link to="/movie">电影</Link></Menu.Item>
        <Menu.Item key="about"><Link to="/about">关于</Link></Menu.Item>
      </Menu>
    </Header>
    <Content style={{ backgroundColor: '#fff', flex: '1' }}>
      <Route exact path="/" render={()=><Redirect to="/home" />} ></Route>
      <Route path="/home" component={HomeContainer}></Route>
      <Route path="/movie" component={MovieContainer}></Route>
      <Route path="/about" component={AboutContainer}></Route>
    </Content>
    <Footer style={{ textAlign: 'center' }}>
      Ant Design ©2018 Created by Ant UED
    </Footer>
    </Layout>
      </HashRouter>
    );
  }
}

export default App;
